class Snake
{
    constructor(el){
        this.el = el;
        this.len = 20;
        this.snakeObj = [
            { x: 3, y :2, color:'red', el:null},  //蛇头
            { x: 2, y :2, color:'blue', el:null}, // 蛇的身体
            { x: 1, y :2, color:'blue', el:null}  // 蛇的身体
        ]

        this.direction = 'right';
    }

    create(){

        this.remove();
        //TODO:为什么不能用forEach    注意item,i
        this.snakeObj.forEach((item,i)=>{
        // for (let i = 0; i<this.snakeObj.length; i++) {
            let divObj = document.createElement('div');
            divObj.style.width = this.len + 'px';
            divObj.style.height = this.len + 'px';
            divObj.style.position = 'absolute';
            divObj.style.left = this.snakeObj[i].x*this.len + 'px';
            divObj.style.top = this.snakeObj[i].y*this.len + 'px';
            divObj.style.background = this.snakeObj[i].color;
            this.snakeObj[i].el = divObj;
            this.el.appendChild(divObj)
        })     
        // }
    }

    move(){
        // for(let i=0;i<this.snakeObj.length;i++){
        //     this.snakeObj[i].x +=1;
        // }
        for (let i = this.snakeObj.length - 1; i>0; i--) {
            this.snakeObj[i].x = this.snakeObj[i-1].x
            this.snakeObj[i].y = this.snakeObj[i-1].y
        }
    
        switch (this.direction) {
            case 'top':
                this.snakeObj[0].y -= 1
                break;
            case 'bottom':
                this.snakeObj[0].y += 1
                break;
            case 'left':
                this.snakeObj[0].x -= 1
                break;
            case 'right':
                this.snakeObj[0].x += 1
                break;
        }
        this.create();
    }

    remove(){
        for(let i=0;i<this.snakeObj.length;i++){
            if(this.snakeObj[i].el){
                this.el.removeChild(this.snakeObj[i].el);
            }
        }
    }



}